<template>
  <div class="insert-shop-product">
    <div class="title">修改产品测试表</div>
    <el-form :model="formCon" v-loading="loading" :rules="rules" ref="ruleForm" label-width="120px" class="form-con">
      <div class="item">
        <label for="" class="desc">
          <span class="red">*</span>县编号：</label>
        <el-select class="select-model" v-model="provinceName" placeholder="请选择" @change="getCity">
          <el-option v-for="(item, i) in provinceOption" :key="item.provinceId" :label="item.provinceName"
                     :value="item.provinceId"></el-option>
        </el-select>
        <el-select class="select-model" v-model="cityName" placeholder="请选择" @change="getDistrict">
          <el-option v-for="(item, i) in cityOption" :key="item.cityId" :label="item.cityName"
                     :value="item.cityId"></el-option>
        </el-select>
        <el-select class="select-model" v-model="districtName" placeholder="请选择">
          <el-option v-for="(item, i) in districtOption" :key="item.districtId" :label="item.districtName"
                     :value="item.districtId"></el-option>
        </el-select>
      </div>
      <el-form-item label="产品型号：" prop="productModelId">
        <el-select v-model="formCon.productModelId" placeholder="请选择">
          <el-option v-for="(item, i) in productModelOption" :label="item.modelName" :value="item.productModelId"
                     :key="item.productModelId"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="产品类型：" prop="productType">
        <el-radio class="radio" v-model="formCon.productType" label="1">单车</el-radio>
        <el-radio class="radio" v-model="formCon.productType" label="2">充电宝</el-radio>
        <el-radio class="radio" v-model="formCon.productType" label="3">雨伞</el-radio>
        <el-radio class="radio" v-model="formCon.productType" label="4">娃娃机</el-radio>
      </el-form-item>
      <el-form-item label="赠送积分：" prop="inregral">
        <el-input v-model="formCon.inregral" placeholder="请输入内容"></el-input>
      </el-form-item>
      <el-form-item label="名称：" prop="name">
        <el-input v-model="formCon.name" placeholder="请输入内容"></el-input>
      </el-form-item>
      <set-param></set-param>
      <el-form-item label="图片上传：">
        <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :file-list="picture">
          <el-button size="normal" type="primary">点击上传</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item label="选择日期：" prop="inputTime">
        <el-date-picker v-model="formCon.inputTime" type="date" placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="说明：" prop="info">
        <el-input v-model="formCon.info" :autosize="{ minRows: 2, maxRows: 4}" type="textarea" placeholder="请输入内容"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type='primary' @click="updateData">提 交</el-button>
        <el-button type='primary' @click="goBack">返 回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import $ from 'jquery'
  import SetParam from 'components/setParam/setParam'

  export default {
    data () {
      return {
        loading: false,
        formCon: {
          districtId: '',
          productType: 1,
          inregral: '',
          inputTime: '',
          name: '',
          info: '',
          productModelId: ''
        },
        picture: [],
        districtName: '',
        cityName: '',
        provinceName: '',
        provinceOption: [],
        cityOption: [],
        districtOption: [],
        productModelOption: [],
        // 验证规则
        rules: {
          productType: [
            {required: true, message: '请选择类型', trigger: 'blur'}
          ],
          inregral: [
            {required: true, message: '请输入积分', trigger: 'blur'}
          ],
          name: [
            {required: true, message: '请输入名称', trigger: 'blur'}
          ],
          info: [
            {required: true, message: '请输入说明', trigger: 'blur'}
          ],
          inputTime: [
            {type: 'date', required: true, message: '请选择时间', trigger: 'blur'}
          ]
        }
      }
    },
    created () {
      setTimeout(() => {
        this.getData()
        this.getProvince()
        this.getProductModel()
      }, 20)
    },
    watch: {
      '$route' (to, from) {
        this.getData()
      }
    },
    methods: {
      getData () {
        let id = this.$route.params.productTestId
        if (id) {
          $.post('/basis/productTest.do?method=select', {param: JSON.stringify({condition: 'productTestId= ' + id})}).then((res) => {
            if (this.$route.path === `/basic/productTest/update/${id}`) {
              this.formCon = res.map
              this.formCon.productType += ''
              $.post('/basis/district.do?method=select', {param: JSON.stringify({condition: 'districtId= ' + res.map.districtId})}).then((res) => {
                this.districtName = res.map.districtName
                $.post('/basis/city.do?method=select', {param: JSON.stringify({condition: 'cityId= ' + res.map.cityId})}).then((res) => {
                  this.cityName = res.map.cityName
                  $.post('/basis/province.do?method=select', {param: JSON.stringify({condition: 'provinceId= ' + res.map.provinceId})}).then((res) => {
                    this.provinceName = res.map.provinceName
                    this.loading = false
                  })
                })
              })
            }
          })
        }
      },
      updateData () {
        // 获取表单输入数据
//        let data = {
//          deviceNo: 'hello',
//          districtId: this.formCon.districtId,
//          info: this.formCon.info,
//          inputTime: this.formCon.inputTime,
//          inregral: this.formCon.inregral,
//          name: this.formCon.name,
//          picture: 'hello',
//          productType: this.formCon.productType,
//          shopId: 1,
//          productModelId: 1
//        }
        let VoProductTest = {
          deviceNo: 'hello',
          districtId: this.formCon.districtId,
          info: this.formCon.info,
          inputTime: this.formCon.inputTime,
          inregral: this.formCon.inregral,
          name: this.formCon.name,
          picture: 'hello',
          productType: this.formCon.productType,
          shopId: 1,
          productModelId: 1
        }
        // 将数据传给后端数据库
        $.post('/basis/productTest.do?method=update', {param: JSON.stringify(VoProductTest)}).then((res) => {
          res.code === 0 ? alert('添加成功') : alert('好像哪里出错了')
        })
      },
      // 回到查询页
      goBack () {
        this.$router.push('/basic/productTest/query')
      },
      getProvince () {
        $.post('/basis/province.do?method=query', {param: JSON.stringify({})}).then((res) => {
          this.provinceOption = res.maps
        })
      },
      getCity (value) {
        if (typeof value === 'number') {
          $.post('/basis/city.do?method=query', {param: JSON.stringify({condition: 'provinceId= ' + value})}).then((res) => {
            this.cityOption = res.maps
          })
        }
      },
      getDistrict (value) {
        if (typeof value === 'number') {
          $.post('/basis/district.do?method=query', {param: JSON.stringify({condition: 'cityId= ' + value})}).then((res) => {
            this.districtOption = res.maps
          })
        }
      },
      // 获取产品类型数据
      getProductModel () {
        $.post('/basis/productModel.do?method=query', {param: JSON.stringify({})}).then((res) => {
          this.productModelOption = res.maps
        })
      }
    },
    components: {
      SetParam
    }
  }
</script>

<style lang="stylus" type="text/stylus" rel="stylesheet/stylus">
  .insert-shop-product
    position: relative
    width: 1000px
    margin: 40px auto 0
    border 1px solid rgba(0, 0, 0, .2)
    .title
      width: 100%
      line-height: 50px
      height: 50px
      text-indent: 20px
      background: #f3f5f7
      font-weight: 700
    .form-con
      padding 20px 0 0 0
      .el-textarea
        width: 440px
      .param-select
        & > .el-input
          width: 75px
        .param-content.is-disabled
          width: 220px
      .item
        margin-bottom 22px
        .red
          color #ff4949
          margin-right 4px
        .desc
          display inline-block
          width 106px
          margin-right 28px
          color rgb(72, 106, 90)
          font-size 14px
          text-align right
      .el-form-item__label
        margin-right 20px
      .select-model
        & > .el-input
          width 100px
          margin-right 10px
      .el-input
        width 220px
      .el-form-item__error
        text-indent 20px
      .btn-group
        padding-top: 10px
        button
          display: inline-block
          margin-right: 10px
</style>
